<template>
    <a-drawer :title="title" :width="500" @close="handleCancel(false)" :visible="visible" :maskClosable="false"
              :bodyStyle="{ paddingBottom: '60px' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <!-- 登录账号 -->
            <a-form-model-item label="类型代码" prop="code" ref="code">
                <a-input placeholder="请设置类型代码"
                         :maxLength="20"
                         v-model="form.code" :disabled="isUpdate"/>
            </a-form-model-item>
            <a-form-model-item label="类型名称" prop="name" ref="name">
                <a-input
                        :maxLength="20"
                        placeholder="请设置类型名称" v-model="form.name"/>
            </a-form-model-item>
            <a-form-model-item  label="是否免费" prop="isFree" ref="isFree">
                <a-radio-group  v-model="form.isFree" button-style="solid" @change="onChangRadio">
                    <a-radio-button  v-for="(item,index) in VehicleTypeISFreeOPT " :key="index" :value="item.value">{{item.label}}</a-radio-button>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="默认分类" prop="isDefault" ref="isDefault">
                <a-switch  checked-children="是"
                           un-checked-children="否"
                           :checked="form.isDefault === 'T'"  @change="onChangeSwitch" />
            </a-form-model-item>
            <a-form-model-item class="margin-b-2rem"
                               label="匹配字符" prop="matchString" ref="matchString"
                               help="请设置车牌包含的匹配字符 多个字符已逗号（,）分隔开 例如:警、领 等">
                <a-input placeholder="请设置匹配当前分类的字符 例如:警、领 等 " v-model="form.matchString"/>
            </a-form-model-item>
        </a-form-model>
        <!-- Modal 页脚 -->
        <footer class="drawer-footer">
            <a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
        </footer>
    </a-drawer>
</template>
<script>
    import {vehicleTypeAdd, vehicleTypeUpdate} from '../../public/http.js';
    import {dictLoad} from '../../../../util/internal.api';
    export default {
        props: ['editRecord'],
        data() {
            return {
                isUpdate: false, //是否是更新模式
                loading: false, //按钮Loading
                title: '新增车辆类型',
                visible: true, //modal 显示状态
                labelCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 5
                    }
                },
                wrapperCol: {
                    xs: {
                        span: 24
                    },
                    sm: {
                        span: 16
                    }
                },
                form: {
                    code: null,
                    name: null,
                    matchString: null,
                    isFree: "F",
                    isDefault: "F",
                },
                rules: {
                    code: [
                        {
                            required: true,
                            message: '请设置分类代码',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '分类代码请设置在20个字符以内',
                            trigger: 'blur'
                        },
                        {
                            pattern: /^[a-zA-Z0-9]+$/,
                            message: '分类代码只允许填写数字或者字母',
                            trigger: 'blur'
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: '请设置分类名称',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '分类名称请设置为20个字符以内',
                            trigger: 'blur'
                        }
                    ],
                    isFree: {
                        required: true,
                        message: '请设置类别免费属性',
                        trigger: 'blur'
                    },
                    isDefault: {
                        required: true,
                        message: '请设置类别是否为默认属性',
                        trigger: 'blur'
                    },
                },
                VehicleTypeDefaultOPT: [],
                VehicleTypeISFreeOPT:[],
            };
        },
        methods: {

            onChangeSwitch(e) {
                if (e) {
                    this.form.isDefault = "T";
                } else {
                    this.form.isDefault = "F";
                }
            },
            onChangRadio(e) {
                this.form.isFree = e.target.value;
            },
            //表单提交事件
            onSubmit() {
                this.$refs.ruleForm.validate(valid => {
                    //验证成功后进行数据提交
                    if (valid) {
                        this.loading = true;
                        if (this.isUpdate) {
                            vehicleTypeUpdate(this.form.id, this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        } else {
                            vehicleTypeAdd(this.form).then(res => {
                                this.$exMod.ajaxMessage(res);
                                if (res.code === 0) {
                                    this.handleCancel(true);
                                }
                            });
                        }
                    }
                });
            },
            //关闭弹窗 刷新
            handleCancel(render = false) {
                this.visible = false;
                this.$emit('closeFun', {render: render});
            },
            //表单初始化
            fromVal() {
                let obj = {...this.editRecord};
                if (obj.id) {
                    this.form = obj;
                    this.isUpdate = true;
                    this.title = '编辑车辆分类';
                }
            },
            //数据初始化
            async init() {
                await dictLoad("VehicleTypeDefault").then(res => this.VehicleTypeDefaultOPT = res);
                await dictLoad("VehicleTypeISFree").then(res => this.VehicleTypeISFreeOPT = res);
                this.fromVal();
            }
        },
        mounted() {
            this.init();
        }
    };
</script>
